<template>
  <div class="login_page">
    <div class="login_wrap">
      <div class="login_right">
        <div class="form_wrap">
          <div class="header_text">
            <span>登录</span><span>没有账号?
              <el-link
                type="primary"
                :underline="false"
              >点此注册</el-link></span>
          </div>
          <sign-login />
          <el-divider>其它登录方式</el-divider>
          <div class="login_method">
            <div class="imgs">
              <img
                src="../assets/images/QQ.png"
                alt=""
              />
              <img
                src="../assets/images/wechat.png"
                alt=""
              />
              <img
                src="../assets/images/Alipay.png"
                alt=""
              />
              <img
                src="../assets/images/dingding.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SignLogin from '@/components/SignLogin.vue';
export default {
  name: 'Login',
  components: {
    SignLogin,
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.login_page {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #5dd5c8 url("@/assets/images/newbg.png") center bottom no-repeat;
  background-size: 100%;
  min-width: 1200px;
  .login_wrap {
    position: relative;
    max-width: 800px;
    width: 100%;
    display: flex;
    background-color: #fff;
    box-shadow: 0 6px 13px 0 rgb(0 0 0 / 10%);
    border-radius: 10px;
    .login_right {
      width: 100%;
      padding: 30px 90px;
      box-sizing: border-box;
      p {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .form_wrap {
        padding: 0 60px;
        min-width: 400px;
        margin: 0 auto;
        .header_text {
          display: flex;
          justify-content: space-between;
          margin: 30px 0;
          span:first-child {
            font-size: 24px;
            font-family: sans-serif;
            font-weight: bold;
          }
        }
        .login_method {
          display: flex;
          justify-content: center;
          .imgs {
            display: flex;
            img {
              width: 40px;
              height: 40px;
              margin: 0 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("@/assets/images/round_box.png") no-repeat center bottom;
      background-size: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      content: "";
    }
  }
}
</style>
